<template>
  <div class="tmpl">
    <h1>TeacherTable</h1>
    <div ref="msgDiv">{{msg}}</div>
    <div v-if="msg1">msg1: {{msg1}}</div>
    <div v-if="msg2">$nextTick msg2: {{msg2}}</div>
    <div v-if="msg3">msg3: {{msg3}}</div>
    <button @click="changeMsg">
      Change the Message
    </button>
  </div>
</template>

<script>
export default {
  name: 'TeacherTable',
  data () {
    return {
      msg: 'Hello Vue',
      msg1: '',
      msg2: '',
      msg3: ''
    }
  },
  created () {
    this.$nextTick(() => {
      this.msg1 = this.$refs.msgDiv.innerHTML
    })
  },
  mounted () {
    this.msg3 = this.$refs.msgDiv.innerHTML
  },
  methods: {
    changeMsg () {
      this.msg = 'Hello world'
      this.msg1 = this.$refs.msgDiv.innerHTML
      this.$nextTick(() => {
        this.msg2 = this.$refs.msgDiv.innerHTML
      })
      this.msg2 = this.$refs.msgDiv.innerHTML
      this.msg3 = this.$refs.msgDiv.innerHTML
    }
  }
}
</script>

<style scoped>
h1 {
  font-weight: normal;
}
</style>
